<template>
  <div :class="{'container':typePage===2,'container-best':true,'scroll-box':true }">

    <!-- 取消工单 -->
    <div
      class="cancel-box"
      v-for="cancel in workOrderFlowData.processing_list"
      :key="cancel.status"
      v-show="cancel.status===5"
    >
      <div>
        <p class="red-round"></p>
        <p class="red-round-bottom"></p>
      </div>
      <div
        v-if="cancel.status===5"
        class="width-bast"
      >
        <div class="top-name">
          <p class="cancel-name">{{cancel.username}}取消工单</p>
          <p class="top-time">{{cancel.OperateDate}}</p>
        </div>
        <div class="content-name margin-top-eight">{{cancel.operate_content.length>=1?'取消理由':''}}</div>
        <div class="content-value margin-top-eight">{{cancel.operate_content.length>=1?cancel.operate_content[0].content:''}}</div>
        <div class="border-grey"></div>
      </div>
    </div>

    <van-steps
      direction="vertical"
      :active="100"
      v-for="(workData,index) in workOrderFlowData.processing_list"
      :key="index"
    >
      <!-- 处理工单 -->
      <van-step v-if="workData.status===4">
        <div class="top-name">
          <p>{{workData.username}}处理工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div
          v-for="(handleList,index) in workData.operate_content"
          :key="index"
        >
          <div class="content-name">{{handleList.name}}</div>
          <div
            class="content-value"
            v-if="handleList.name!=='更换配件'"
          >{{handleList.content}}</div>
          <div v-else>
            <table
              width="100%"
              border="1"
            >
              <tr align="left">
                <td class="table-top">配件名称</td>
                <td class="table-top">物料编号</td>
                <td class="table-top">数量</td>
              </tr>
              <tr
                v-for="matchList in handleList.content"
                :key="matchList.name"
              >
                <td class="table-content">{{matchList.name}}</td>
                <td class="table-content">{{matchList.number}}</td>
                <td class="table-content">{{matchList.num}}</td>
              </tr>
            </table>
          </div>
        </div>

      </van-step>
      <!-- 接单 -->
      <van-step v-if="workData.status===3">
        <div class="top-name">
          <p>{{workData.username}}接单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
      </van-step>
      <!-- 指派工单 -->
      <van-step v-if="workData.status===2">
        <div class="top-name">
          <p>{{workData.username}}指派工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div class="content-left-reight">
          <div class="left-name">指派工程师</div>
          <div class="reight-value">{{workData.operate_content[0].content}}</div>
        </div>
        <div class="content-left-reight">
          <div class="left-name">{{workData.operate_content.length>1?workData.operate_content[1].name:''}}</div>
          <div
            class="reight-value"
            v-for="fingerList in workData.operate_content.length>1?workData.operate_content[1].content:[]"
            :key="fingerList.name"
          >{{fingerList.name}}</div>
        </div>
      </van-step>
      <!-- 修改工单 -->
      <van-step v-if="workData.status===6">
        <div class="top-name">
          <p>{{workData.username}}修改工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div
          class="content-left-reight"
          v-for="(editList,index) in workData.operate_content"
          :key="index"
        >
          <div class="left-name">{{editList.name}}</div>
          <div
            class="reight-value"
            v-if="editList.name!=='现场图片'"
          >{{editList.content}}</div>
          <div v-else>
            <van-image
              v-for="imgList in editList.content"
              :key="imgList"
              :src="imgList"
              class="image-reight"
              @click="imgView(imgList)"
            />
          </div>
        </div>
        <!-- <div class="content-left-reight">
          <div class="left-name">联系电话</div>
          <div class="reight-value">15743345663</div>
        </div> -->
      </van-step>
      <!-- 报警转工单 -->
      <van-step v-if="workData.source===2&&workData.order_type===1&&workData.status===1">
        <div class="top-name">
          <p>{{workData.username}}创建工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div class="content-name">故障描述</div>
        <div class="content-value">{{workData.operate_content.length===0?"":workData.operate_content[0].content}}</div>
        <!-- <div class="content-name">故障代码</div>
        <div class="content-value">15689</div> -->
        <!-- <div class="content-name">故障名称</div>
        <div class="content-value">文字内容文字内容，文字</div>
        <div class="content-name">故障描述</div>
        <div class="content-value">文字内容文字内容，文字</div>
        <div class="content-name">通知时间</div>
        <div class="content-value">2020/05/04 18:12:32</div> -->
      </van-step>
      <!-- 保养转工单 -->
      <van-step v-if="workData.source===2&&workData.order_type===2&&workData.status===1">
        <div class="top-name">
          <p>{{workData.username}}创建工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div class="content-name">保养说明</div>
        <div class="content-value">{{workData.operate_content.length===0?"":workData.operate_content[0].content}}</div>
        <!-- <div class="content-name">计划名称</div>
        <div class="content-value">文字内容文字内容，文字</div>
        <div class="content-name">触发条件</div>
        <div class="content-value">文字内容文字内容，文字</div>
        <div class="content-name">通知时间</div>
        <div class="content-value">2020/05/04 18:12:32</div> -->
      </van-step>
      <!-- 创建保养工单 -->
      <!-- <van-step v-if="workData.source===2&&workData.order_type===2&&workData.status===1">
        <div class="top-name">
          <p>张三创建工单</p>
          <p class="top-time">2020/05/04 18:14:32</p>
        </div>
        <div class="content-name">保养说明</div>
        <div class="content-value">{{workData.operate_content.length===0?"":workData.operate_content[0].content}}</div>
        <div class="content-name">现场图片</div>
        <div>
          <van-image
            width="72"
            height="72"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            class="image-reight"
          />
        </div>
      </van-step> -->
      <!-- 创建维修工单 -->
      <van-step v-if="workData.status===1">
        <div class="top-name">
          <p>{{workData.username}}创建工单</p>
          <p class="top-time">{{workData.OperateDate}}</p>
        </div>
        <div
          v-for="(createList,index) in workData.operate_content"
          :key="index"
        >
          <div class="content-name">{{createList.name}}</div>
          <div
            class="content-value"
            v-if="createList.name!=='现场图片'"
          >{{createList.content}}</div>
          <!-- <div class="content-name">现场图片</div> -->
          <div v-else>
            <!-- {{createList.content}} -->
            <van-image
              v-for="imgList in createList.content"
              :key="imgList"
              :src="imgList"
              class="image-reight"
              @click="imgView(imgList)"
            />
          </div>
        </div>

      </van-step>

    </van-steps>
  </div>
</template>

<script>
import { Step, Steps, Image as VanImage, ImagePreview } from 'vant';
export default {
  name: 'SearchFilter',
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
    [VanImage.name]: VanImage,
    [ImagePreview.name]: ImagePreview
  },
  data() {
    return {};
  },
  props: ['workOrderFlowData', 'typePage'], //typePage:判断是2就是有按钮的高度
  mounted() {},
  methods: {
    //图片预览
    imgView(img) {
      ImagePreview([img]);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 1.653333rem) !important;
  background-color: #fff;
  margin-top: 0.213333rem;
}
.container-best {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 0.213333rem;
}
.width-bast {
  width: 100%;
}
.top-name {
  display: flex;
  justify-content: space-between;
}
.top-time {
  font-size: 0.32rem;
  color: #999999;
}
.content-name {
  font-size: 0.346667rem;
  color: #999999;
  margin-top: 0.213333rem;
  margin-bottom: 0.106667rem;
}
.content-value {
  font-size: 0.346667rem;
  color: #333333;
}
.image-reight {
  margin-right: 0.266667rem;
  width: 1.92rem;
  height: 1.92rem;
}
.content-left-reight {
  display: flex;
  margin-top: 0.213333rem;
  .left-name {
    font-size: 0.346667rem;
    color: #999999;
    flex-shrink: 0;
    margin-right: 0.213333rem;
  }
  .reight-value {
    font-size: 0.346667rem;
    color: #333333;
    // margin-left: 0.213333rem;
  }
}

table {
  border-color: #f2f6fc;
}
.table-top {
  background-color: #fafafa;
  color: #999999;
  padding: 0.266667rem;
}
.table-content {
  padding: 0.266667rem;
}

.cancel-box {
  display: flex;
  padding: 0 0.213333rem;
  margin-top: 0.32rem;
}
.cancel-name {
  font-size: 0.373333rem;
}
.border-grey {
  // border-bottom: 1px solid #f2f6fc;
  margin-top: 0.266667rem;
}
.margin-top-eight {
  margin-top: 0.266667rem;
}

.red-round {
  width: 0.213333rem;
  height: 0.213333rem;
  background-color: #f56c6c;
  border-radius: 0.533333rem;
  margin: 0.08rem 0.266667rem 0 0.133333rem;
}
.red-round-bottom {
  width: 1px;
  height: 100%;
  background: #f56c6c;
  margin: 0.08rem 0.266667rem 0 0.213333rem;
}

//步骤条
::v-deep .van-step--vertical .van-step__line {
  top: 16px;
  left: -15px;
  width: 1px;
  height: 100%;
  position: absolute;
  background-color: #f2f6fc;
}
::v-deep .van-step__circle {
  width: 0.213333rem;
  height: 0.213333rem;
}
::v-deep .van-steps__items {
  border-bottom: 1px solid #f2f6fc;
}
</style>